<template>

	<div id='big_box' class="clearfix">
		<div class="left_box fl ">
			<div class='event'>

				<div class="title">
					<h2>美肌大事记</h2>
					<h3>铭记每一个重要时刻</h3>
					<span class='underline'></span>
				</div>
				<table>
					<tr v-for="(item,index) in record" :key="index">
						<td width="50%" v-for="(tdd,idx) in 2" :key="idx" :class="{'show': (index%2==1&&idx==1)||(index%2!=1&&idx==0),'last':(index==record.length-1)&&(idx==0)}">
							<span :class="{'act_l':idx==0,'act_r':idx==1}"></span>
							<h3> {{item.title}} </h3>
							<p v-for='(it,id) in item.txt' :key="id"> {{it}}</p>
						</td>
					</tr>
				</table>
			</div>
			<div id="joinIn">
				<div class="title">
					<h2>全国加盟</h2>
					<h3>600多位加盟商的共同选择</h3>
					<span class='underline'></span>
				</div>
				<div class='conter'>
					<img src="../../../../static/imgs/img2/hz.png" />
				</div>
			</div>

		</div>
		<div class="right_box fr">
			<div>
				<img src="../../../../static/imgs/login/sl10.png" alt="" />
			</div>
			<div class="shop">
				<!-- <div class="title">
					<h2>数年直营深耕</h2>
					<h3>实力打造千店连锁</h3>
					<span class='underline'></span>
				</div>
				<div class='conter'>
					<img src="../../../../static/imgs/img2/tzz.png" alt="" />
					<div class=txt>
						<h4><span>全国</span>600+网点</h4>
						<p>
							{{chainTxt}}
						</p>
					</div>
				</div> -->
					<img src="../../../../static/imgs/img2/bei.jpg" alt="" />
			</div>
		</div>
	</div>

</template>

<script>
	export default {
		name: 'mains',
		data() {
			return {
				shows: true,
				chainTxt: "美肌工坊成立仅一年多，覆盖全国80多座城市，门店突破600家，以领导者的姿态率先占领市场，突显强大品牌影响力，为加盟商塑造极具优势的市场环境。",
				record: [{
						title: "2016年12月",
						txt: ["美肌工坊诞生"]
					},
					{
						title: "2017 年5月",
						txt: ["美肌工坊突破百家"]
					},
					{
						title: "2017 年8月",
						txt: ["美肌工坊商学院成立"]
					},
					{
						title: "2017 年9月",
						txt: ["美肌工坊2 .0 版本门店发布成功入选“ 中国优选品牌”"]
					},
					{
						title: "2017 年10月",
						txt: ["美肌工坊全国门店突破300家"]
					},
					{
						title: "2017 年12月",
						txt: ["美团、 大众科技美容品牌排行第一获磁云科技天使轮投资 ", "美肌工坊全国门店突破450家”"]
					},
					{
						title: "2018 年2月",
						txt: ["获得梅花资本的战略投资"]
					},
					{
						title: "2018 年3月",
						txt: ["美肌工坊“ 智能店铺” 上线 ", "美肌工坊全国门店突破550家"]
					},
					{
						title: "2018年6月",
						txt: ["获得梅花基金、黑马基金千万级别的A轮融资"]
					},
					{
						title: "2018年8月",
						txt: ["全国门店突破600家", "直营门店18家"]
					}
				]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		padding-bottom: 84px;
		h2 {
			font-size: 48px;
			font-family: SourceHanSansCN-Bold;
			color: rgba(245, 133, 95, 1);
			line-height: 64px;
		}
		h3 {
			font-size: 40px;
			font-family: SourceHanSansCN-Light;
			color: rgba(160, 160, 160, 1);
			line-height: 64px;
		}
		.underline {
			display: block;
			width: 68px;
			height: 3px;
			background-color: #F5855F;
		}
	}
	
	#big_box {
		width: 100%;
		padding: 93px 124px 0px 124px;
		.left_box {
			width: 50%;
			/*大事件*/
			.event {
				.title {
					width: 100%;
					text-align: center;
					padding-bottom: 93px;
					.underline {
						margin: 0 auto;
					}
				}
				table {
					margin: 0 auto;
					tr {
						td {
							position: relative;
							padding-bottom: 10px;
							h3 {
								font-weight: bold;
								font-size: 26px;
								font-family: SourceHanSansCN-Bold;
								color: rgba(125, 102, 80, 1);
								line-height: 46px;
								color: #7D6650;
								font-size: 26px;
							}
							p {
								font-family: SourceHanSansCN-Light;
								color: #7D6650;
								font-size: 22px;
							}
							span.act_r {
								width: 20px;
								height: 20px;
								background-color: #F5855F;
								display: block;
								position: absolute;
								top: 0px;
								left: 0px;
								transform: translate(-55%, -50%);
								border-radius: 50%;
								background: -webkit-radial-gradient(#F5855F 50%, #FDDACE 50%);
							}
							span.act_l {
								width: 20px;
								height: 20px;
								background-color: #F5855F;
								display: block;
								position: absolute;
								top: 0px;
								right: 0px;
								margin: 0 0 auto auto;
								transform: translate(55%, 50%);
								border-radius: 50%;
								background: -webkit-radial-gradient(#F5855F 50%, #FDDACE 50%);
							}
						}
						td:nth-child(2n-1) {
							border-right: 1px dashed #000;
							text-align: right;
							padding-right: 20px;
						}
						td.last{
							border-right: none;
						}
						td:nth-child(2n) {
							padding-left: 20px;
						}
						.show {
							visibility: hidden
						}
						.show.last {
							border-right: none;
						}
					}
				}
			}
			/*加盟商*/
			#joinIn {
				img {
					box-shadow: 10px 10px 5px #888888;
				}
			}
		}
		.right_box {
			.shop {
				padding-top: 300px;
				width: 792px;
				text-align: center;
				// 	box-shadow: 10px 10px 5px #888888;

				// .conter {
				// 	background-color: #F6F6F6;
				// 	box-shadow: 10px 10px 5px #888888;
				// 	height: 1062px;
				// 	img {
				// 		padding-bottom: 84px;
				// 	}
				// 	.txt {
				// 		padding-left: 70px;
				// 		h4 {
				// 			font-size: 30px;
				// 			font-family: SourceHanSansCN-Medium;
				// 			color: rgba(245, 133, 95, 1);
				// 			line-height: 55px;
				// 			padding-bottom: 102px;
				// 			span {
				// 				border-bottom: 2px solid #7D6650;
				// 				padding-bottom: 24px;
				// 			}
				// 		}
				// 		p {
				// 			width: 655px;
				// 			font-size: 24px;
				// 			font-family: SourceHanSansCN-Normal;
				// 			color: #7C7C7C;
				// 			line-height: 26px;
				// 		}
				// 	}
				// }
			}
		}
	}
</style>